<template>
  <view class="index-page" :style="{ paddingBottom: '100px' }">
    <!-- 背景 -->
    <view class="bg-top"></view>

    <!-- 页面顶部信息区域，替代原导航栏 -->
    <view class="index-header" :style="[{ padding: menuInfo.top + 'px 30rpx 30rpx' }, headerStyle]">
      <view class="app-title">
        <view class="app-name" :style="appNameStyle">星遇</view>
      </view>

      <!-- 搜索区域(整合到顶部) -->
      <view class="search-box">
        <view class="campus-select" @click="showCampusSelector">
          <text class="campus-text text-ellipsis">{{ currentCampus }}</text>
          <tn-icon name="right-circle" size="24"></tn-icon>
        </view>
        <view class="search-input" @click="navigateTo('/pages/search/index')">
          <tn-icon name="search" size="32" color="#B3B9C2"></tn-icon>
          <text class="placeholder">搜索</text>
        </view>
      </view>
    </view>

    <!-- 轮播图 -->
    <view class="banner-wrapper">
      <tn-swiper v-model="currentBannerListIndex" :data="bannerList" height="200rpx" :interval="3000" :autoplay="true" indicator :loop="true">
        <template #default="{ data }">
          <view class="banner-item">
            <image style="width: 100%; height: 100%; border-radius: 16rpx" :src="data.imgUrl" />
          </view>
        </template>
      </tn-swiper>
    </view>

    <!-- 主要功能菜单 -->
    <view class="main-menu">
      <view class="menu-card idle-card" @click="navigateTo('/pages/trade/trade?type=idle')">
        <view class="menu-card-content">
          <view class="menu-left">
            <view class="menu-title title-text">二手交易</view>
            <view class="menu-info helper-text">3000人热捧</view>
          </view>
          <view class="menu-icon idle-icon">
            <tn-icon name="buy-fill" size="50" color="#ffffff"></tn-icon>
          </view>
        </view>
        <view class="go-button">GO></view>
      </view>
      <view class="menu-card forum-card" @click="navigateTo('/pages/trade/trade?type=reward')">
        <view class="menu-card-content">
          <view class="menu-left">
            <view class="menu-title title-text">赏金任务</view>
            <view class="menu-info helper-text">2W人参与中</view>
          </view>
          <view class="menu-icon reward-icon">
            <tn-icon name="sword-fill" size="50" color="#ffffff"></tn-icon>
          </view>
        </view>
        <view class="go-button">GO></view>
      </view>
    </view>

    <!-- 次要功能菜单 -->
    <view class="sub-menu">
      <view class="sub-menu-item" @click="navigateTo('none')">
        <view class="sub-icon job-icon">
          <tn-icon name="job" size="46" color="#ffffff"></tn-icon>
        </view>
        <text class="sub-text">兼职信息</text>
      </view>
      <view class="sub-menu-item" @click="navigateTo('none')">
        <view class="sub-icon house-icon">
          <tn-icon name="bed" size="46" color="#ffffff"></tn-icon>
        </view>
        <text class="sub-text">租房信息</text>
      </view>
      <view class="sub-menu-item" @click="navigateTo('none')">
        <view class="sub-icon activity-icon">
          <tn-icon name="flag" size="46" color="#ffffff"></tn-icon>
        </view>
        <text class="sub-text">活动组局</text>
      </view>
      <view class="sub-menu-item" @click="navigateTo('none')">
        <view class="sub-icon activity-icon">
          <tn-icon name="qr-code" size="46" color="#ffffff"></tn-icon>
        </view>
        <text class="sub-text">扫码进群</text>
      </view>
    </view>

    <!-- 帖子区域标题 -->
    <tn-sticky :offset-top="headerHeight" class="section-title" @change="changeSticky">
      <tn-scroll-list :indicator="false" class="title-tags">
        <view v-for="(tag, index) in categoryTags" :key="tag.id" class="tag-item" :class="{ active: currentTag === index }" @click="switchTag(index)">
          {{ tag.name }}
        </view>
      </tn-scroll-list>
    </tn-sticky>

    <!-- 帖子列表 -->
    <view class="postList">
      <PostList
        :posts="posts"
        :showFollow="true"
        :showLoadMore="true"
        :hasMore="hasMore"
        :loading="loading"
        @postClick="handlePostClick"
        @followClick="handleFollowClick"
        @tagClick="handleTagClick"
      />
    </view>

    <!-- 底部自定义TabBar -->
    <tab-bar @get-tabbarHeight="getTabbarHeight"></tab-bar>

    <!-- 隐私协议弹窗 -->
    <tn-popup v-model="showPrivacy" open-direction="bottom">
      <view>用户隐私协议:localhost:{{ location }}</view>
    </tn-popup>

    <!-- 学校选择确认弹窗 -->
    <tn-modal ref="schoolBindingModalRef" />
  </view>
</template>

<script setup>
import { ref, onMounted, computed, watch, nextTick } from 'vue';
import { onPageScroll as uniPageScroll, onReachBottom, onPullDownRefresh, onLoad, onReady, onShow } from '@dcloudio/uni-app';
import TabBar from '@/components/tabbar/TabBar.vue';
import PostList from '@/components/post-list/PostList.vue';
import api from '@/utils/api.js';

// 页面加载时获取数据
onMounted(() => {
  // 初始化用户状态检查
  initUserStatus();
  // 获取系统配置信息
  getSystemInfo();
  // 获取微信小程序右上角胶囊按钮信息
  getMenuInfo();
  // 获取学校列表
  getSchoolList();

  loadPosts();

  // getUserInfo();
});

// 页面初次渲染完成时触发
onReady(async () => {
  await nextTick();
  // 获取顶部导航栏高度
  getHeaderHeight();
});

// 使用uni-app的页面滚动钩子
uniPageScroll(({ scrollTop }) => {
  pageScrollTop.value = scrollTop;
});

// 页面滚动到底部时触发
onReachBottom(() => {
  loadMorePosts();
});

// 下拉刷新时触发
onPullDownRefresh(() => {
  refreshData();
});

// tabbar高度
const tabbarHeight = ref(0);
const getTabbarHeight = (height) => {
  console.log('indextabbarHeight', height);
};

// 微信小程序右上角胶囊按钮信息
const menuInfo = ref({
  top: 30,
  bottom: 0,
  left: 0,
  right: 0,
  width: 0,
  height: 0
});
const getMenuInfo = async () => {
  try {
    // 检查是否在微信小程序环境
    if (typeof wx !== 'undefined' && wx.getMenuButtonBoundingClientRect) {
      const rect = await wx.getMenuButtonBoundingClientRect();
      if (rect) {
        menuInfo.value = rect;
        // console.log('menuinfo', menuInfo.value);
      }
    }
  } catch (error) {
    console.warn('获取胶囊按钮信息失败:', error);
    // 使用默认值，避免报错
    menuInfo.value = {
      top: 44, // 默认状态栏高度
      bottom: 88,
      left: 0,
      right: 0,
      width: 87,
      height: 32
    };
  }
};

// 获取导航栏高度的方法
const getHeaderHeight = () => {
  uni
    .createSelectorQuery()
    .select('.index-header')
    .boundingClientRect((data) => {
      if (data) {
        headerHeight.value = data.height;
        // console.log('导航栏高度:', data.height);
      }
    })
    .exec();
};

// 系统信息
const systemInfo = ref();
const getSystemInfo = () => {
  // console.log('info:', wx.getSystemInfoSync());
};

// 获取用户个人信息
const getUserInfo = async () => {
  console.log('loginUserInfo', uni.getStorageSync('loginUserInfo'));
  const res = await api.user.getByUserId(res.userId);
  console.log('userInfo', res);
};

// 获取位置
const location = ref();
const getUserLocation = () => {
  wx.getLocation({
    type: 'wgs84',
    success(res) {
      console.log('location:', res);
      location.value = res;
    }
  });
};

// 用户隐私协议
const showPrivacy = ref(false);
const checkUserPrivacy = () => {
  wx.getPrivacySetting({
    success: (res) => {
      console.log(res); // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
      if (res.needAuthorization) {
        // 需要弹出隐私协议
        showPrivacy.value = true;
      } else {
        // 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用隐私接口
      }
    },
    fail: () => {},
    complete: () => {}
  });
};

// 获取校区列表
const getSchoolList = async () => {
  await getUserLocation();
  const res = await api.circle.getSchoolListByLocation(location.value?.longitude, location.value?.latitude);
  console.log('学校列表：', res);
};

// 用户状态相关
const schoolBindingModalRef = ref();

// 初始化用户状态检查
const initUserStatus = async () => {
  try {
    // 1. 检查用户登录状态
    const loginUserInfo = await checkUserLogin();
    if (!loginUserInfo) {
      console.log('用户未登录，跳过学校检查');
      return;
    }

    // 2. 检查学校绑定状态
    await checkUserSchool(loginUserInfo.userId);
  } catch (error) {
    console.error('初始化用户状态失败:', error);
    uni.showToast({
      title: '获取用户信息失败',
      icon: 'none'
    });
  }
};

// 检查用户登录状态
const checkUserLogin = async () => {
  try {
    // 获取缓存的登录信息
    let loginUserInfo = uni.getStorageSync('loginUserInfo');

    if (!loginUserInfo) {
      // 执行微信登录
      const { code: loginCode } = await wx.login();
      console.log('获取登录码:', loginCode);

      const res = await api.user.miniAppLogin(loginCode);
      console.log('登录获取res', res);

      loginUserInfo = res;
      uni.setStorageSync('loginUserInfo', loginUserInfo);
    }

    return loginUserInfo;
  } catch (error) {
    console.error('用户登录失败:', error);
    throw new Error('登录失败，请重试');
  }
};

// 检查用户学校绑定状态
const checkUserSchool = async (userId) => {
  try {
    // 检查是否有临时或原始学校ID
    const schoolId = uni.getStorageSync('temporarySchoolId') || uni.getStorageSync('orginalSchoolId');
    console.log('缓存的schoolId:', schoolId);

    if (!schoolId) {
      // 获取用户详细信息
      const userInfo = await api.user.getByUserId(userId);
      console.log('用户详细信息:', userInfo);

      if (!userInfo.schoolId) {
        // 检查是否需要提醒用户绑定学校
        const shouldShowReminder = checkShouldShowSchoolReminder();
        if (shouldShowReminder) {
          // 用户未绑定学校，显示绑定提醒弹窗
          showSchoolBindingModal();
          console.log('用户未绑定学校，显示绑定提醒');
        } else {
          console.log('用户选择暂不绑定，跳过提醒');
        }
      } else {
        // 缓存用户的学校ID
        uni.setStorageSync('orginalSchoolId', userInfo.schoolId);
        console.log('用户已绑定学校:', userInfo.schoolId);
      }
    } else {
      console.log('用户已有学校信息:', schoolId);
    }
  } catch (error) {
    console.error('检查学校绑定状态失败:', error);
    throw new Error('获取学校信息失败');
  }
};

// 显示学校绑定提醒弹窗
const showSchoolBindingModal = () => {
  console.log('准备显示学校绑定弹窗');
  console.log('schoolBindingModalRef:', schoolBindingModalRef.value);

  if (!schoolBindingModalRef.value) {
    console.error('Modal组件引用不存在');
    return;
  }

  try {
    schoolBindingModalRef.value.showModal({
      title: '学校绑定提醒',
      content: '还没有绑定学校哦～\n\n绑定学校后，您可以：\n• 查看本校专属内容\n• 参与校园话题讨论\n• 享受校园服务功能',
      showCancel: true,
      confirmText: '立即绑定',
      cancelText: '暂不绑定',
      maskClosable: false,
      confirmStyle: {
        bgColor: '#A3D2E6',
        color: '#FFFFFF'
      },
      cancelStyle: {
        bgColor: 'rgba(212, 205, 195, 0.3)',
        color: '#6D6D6D'
      },
      confirm: () => {
        console.log('用户点击了确认按钮');
        return handleGoBinding();
      },
      cancel: () => {
        console.log('用户点击了取消按钮');
        return handleSkipBinding();
      }
    });
    console.log('Modal showModal 方法调用成功');
  } catch (error) {
    console.error('显示Modal失败:', error);
  }
};

// 检查是否应该显示学校绑定提醒
const checkShouldShowSchoolReminder = () => {
  const skipTime = uni.getStorageSync('skipSchoolBindingTime');
  if (!skipTime) {
    return true; // 从未跳过，显示提醒
  }

  const currentTime = Date.now();
  const oneDayInMs = 24 * 60 * 60 * 1000; // 一天的毫秒数

  // 如果距离上次跳过超过1天，再次显示提醒
  return currentTime - skipTime > oneDayInMs;
};

// 处理学校绑定逻辑
const handleSkipBinding = () => {
  // 记录用户选择暂不绑定的时间，避免频繁提醒
  const skipTime = Date.now();
  uni.setStorageSync('skipSchoolBindingTime', skipTime);

  uni.showToast({
    title: '您可以稍后在个人中心绑定学校',
    icon: 'none',
    duration: 2000
  });

  console.log('用户选择暂不绑定学校');
  return true; // 返回 true 允许关闭弹窗
};

// 执行跳转学校选择
const handleGoBinding = () => {
  // 清除跳过绑定的记录
  uni.removeStorageSync('skipSchoolBindingTime');

  // 跳转到学校选择页面
  uni.navigateTo({
    url: '/pages/school-select/school-select',
    fail: (err) => {
      console.error('跳转学校选择页面失败:', err);
      uni.showToast({
        title: '页面跳转失败，请稍后重试',
        icon: 'none'
      });
      return false; // 跳转失败时不关闭弹窗
    }
  });

  console.log('用户选择立即绑定学校');
  return true; // 返回 true 允许关闭弹窗
};

// 头部导航栏背景样式
const headerStyle = computed(() => {
  // 当滚动超过30rpx时，背景变为白色
  const opacity = pageScrollTop.value > 30 ? 1 : 0;
  return {
    backgroundColor: `rgba(255, 255, 255, ${opacity})`
  };
});

// 应用名称文字颜色样式
const appNameStyle = computed(() => {
  // 当滚动超过30rpx时，文字变为深色
  const isScrolled = pageScrollTop.value > 30;
  return {
    color: isScrolled ? '#6D6D6D' : '#FFFFFF',
    transition: 'color 0.1s ease'
  };
});

// 页面滚动位置
const pageScrollTop = ref(0);

// 当前选择的校区
const currentCampus = ref('主校区');
const showCampus = ref(false);
const campusList = ref(['主校区', '医学校区', '工学校区', '西校区']);

//绑定当前选中选项卡的索引值
const currentBannerListIndex = ref(0);
// 轮播图数据
const bannerList = [
  {
    imgUrl: 'https://resource.tuniaokj.com/images/xiongjie/x14.jpg'
  },
  {
    imgUrl: 'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-2.jpg'
  },
  {
    imgUrl: 'https://resource.tuniaokj.com/images/xiongjie/xiong-3d.jpg'
  }
];

// 轮播图样式
const bannerStyle = {
  border: '2rpx solid #76FF03'
};

// 分类标签
const categoryTags = ref([
  { name: '全部', id: 0 },
  { name: '表白墙', id: 1 },
  { name: '吐槽', id: 2 },
  { name: '求助', id: 3 },
  { name: '失物招领', id: 4 },
  { name: '原神', id: 5 }
]);
const currentTag = ref(0);

// 响应式数据
const posts = ref([]);
const hasMore = ref(true);
const loading = ref(false);
// 添加帖子ID计数器，确保每个帖子都有唯一ID
const postIdCounter = ref(0);

// 导航栏高度
const headerHeight = ref(0); // 默认值，实际会动态获取

// 加载帖子数据
const loadPosts = async () => {
  try {
    loading.value = true;
    // 模拟API调用
    await new Promise((resolve) => setTimeout(resolve, 1000));

    const mockPosts = [
      {
        id: ++postIdCounter.value, // 使用递增的ID
        title: '校园生活分享',
        content:
          '今天在图书馆学习，遇到了很多有趣的同学，大家一起讨论学术问题，感觉收获很大！今天在图书馆学习，遇到了很多有趣的同学，大家一起讨论学术问题，感觉收获很大！今天在图书馆学习，遇到了很多有趣的同学，大家一起讨论学术问题，感觉收获很大！今天在图书馆学习，遇到了很多有趣的同学，大家一起讨论学术问题，感觉收获很大！今天在图书馆学习，遇到了很多有趣的同学，大家一起讨论学术问题，感觉收获很大！今天在图书馆学习，遇到了很多有趣的同学，大家一起讨论学术问题，感觉收获很大！今天在图书馆学习，遇到了很多有趣的同学，大家一起讨论学术问题，感觉收获很大！今天在图书馆学习，遇到了很多有趣的同学，大家一起讨论学术问题，感觉收获很大！今天在图书馆学习，遇到了很多有趣的同学，大家一起讨论学术问题，感觉收获很大！',
        avatar: 'https://img1.baidu.com/it/u=3217838212,795208401&fm=253&fmt=auto&app=138&f=JPEG?w=514&h=500',
        nickName: '学霸小王',
        createTime: '2小时前',
        images: ['https://resource.tuniaokj.com/images/xiongjie/x14.jpg'],
        tags: [
          { id: 1, postTagName: '校园生活' },
          { id: 2, postTagName: '学习' }
        ],
        likeCount: 15,
        commentCount: 8,
        viewCount: 120,
        isFollowed: false
      },
      {
        id: ++postIdCounter.value, // 使用递增的ID
        title: '美食推荐',
        content: '学校附近新开了一家很棒的餐厅，价格实惠味道也很好，推荐给大家！',
        avatar: 'https://iknow-pic.cdn.bcebos.com/8b13632762d0f703c529675f1afa513d2797c59e',
        nickName: '美食达人',
        createTime: '4小时前',
        images: ['https://resource.tuniaokj.com/images/xiongjie/xiong-3d-2.jpg', 'https://resource.tuniaokj.com/images/xiongjie/xiong-3d.jpg'],
        tags: [
          { id: 3, postTagName: '美食' },
          { id: 4, postTagName: '推荐' }
        ],
        likeCount: 32,
        commentCount: 12,
        viewCount: 200,
        isFollowed: true
      }
    ];

    posts.value = [...posts.value, ...mockPosts];
  } catch (error) {
    console.error('加载帖子失败:', error);
  } finally {
    loading.value = false;
  }
};

// 加载更多帖子
const loadMorePosts = async () => {
  if (loading.value || !hasMore.value) return;

  try {
    loading.value = true;
    // 模拟API调用
    await new Promise((resolve) => setTimeout(resolve, 1000));

    // 模拟没有更多数据
    if (posts.value.length >= 10) {
      hasMore.value = false;
      return;
    }

    // 加载更多数据
    await loadPosts();
  } catch (error) {
    console.error('加载更多失败:', error);
  } finally {
    loading.value = false;
  }
};

// 帖子点击事件
const handlePostClick = (post) => {
  console.log('点击帖子:', post);
  uni.navigateTo({
    url: `/pages/detail/post-detail?id=${post.id}`
  });
};

// 关注按钮点击事件
const handleFollowClick = (post) => {
  console.log('点击关注:', post);
  // 切换关注状态
  post.isFollowed = !post.isFollowed;
  uni.showToast({
    title: post.isFollowed ? '关注成功' : '取消关注',
    icon: 'success'
  });
};

// 话题标签点击事件
const handleTagClick = (tag) => {
  console.log('点击话题:', tag);
  uni.navigateTo({
    url: `/pages/tag-detail/tag-detail?id=${tag.id}&name=${tag.postTagName}`
  });
};

// 刷新数据
const refreshData = () => {
  // 重置数据
  posts.value = [];
  hasMore.value = true;
  postIdCounter.value = 0; // 重置ID计数器

  // 重新加载数据
  loadPosts().finally(() => {
    // 停止下拉刷新
    uni.stopPullDownRefresh();
  });
};

// 显示校区选择器
const showCampusSelector = () => {
  showCampus.value = true;
};

// 选择校区
const selectCampus = (campus) => {
  currentCampus.value = campus;
  showCampus.value = false;
  // 重新加载数据
  refreshData();
};

// 切换分类标签
const switchTag = (index) => {
  currentTag.value = index;
  // 重新加载数据
  refreshData();
};

// 页面导航
const navigateTo = (url) => {
  // console.log(url);
  if (url === 'none') {
    uni.showToast({
      title: '待开发',
      icon: 'none'
    });
    return;
  }
  uni.navigateTo({
    url
  });
};

// 吸顶状态切换
const changeSticky = (sticky) => {
  console.log('sticky:', sticky);
};
</script>

<style lang="scss" scoped>
// 从uni.scss导入的颜色变量作为常量
$text-color: $uni-text-color;
$text-color-inverse: $uni-text-color-inverse;
$text-color-grey: $uni-text-color-grey;
$text-color-title: $uni-text-color-title;
$primary-color: $uni-color-primary;
$warning-color: $uni-color-warning;
$highlight-color: $uni-highlight-color;
$bg-color: $uni-bg-color;
$bg-color-grey: $uni-bg-color-grey;
$border-color: $uni-border-color;

.index-page {
  min-height: 100vh;
  background-color: $bg-color-grey;
  position: relative;
}

.bg-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 700rpx;
  background: 
    /* 基础渐变层 */ linear-gradient(
      135deg,
      $primary-color 0%,
      rgba($primary-color, 0.8) 40%,
      rgba($warning-color, 0.6) 60%,
      rgba($warning-color, 0.3) 80%,
      rgba($warning-color, 0) 100%
    ),
    /* 波浪层1 - 左侧 */ radial-gradient(ellipse at 20% 70%, rgba($warning-color, 0.5) 0%, rgba($warning-color, 0) 60%),
    /* 波浪层2 - 右侧 */ radial-gradient(circle at 80% 40%, rgba($primary-color, 0.6) 0%, rgba($primary-color, 0) 50%),
    /* 波浪层3 - 中下部 */ radial-gradient(ellipse at 50% 90%, rgba($highlight-color, 0.4) 0%, rgba($highlight-color, 0) 70%);
  z-index: 0;
  /* 像素风格边缘 */
  mask-image: linear-gradient(to bottom, #000 0%, #000 75%, transparent 100%);
  mask-size: 100% 100%, 100% 16px;
  mask-position: 0 0, 0 bottom;
  mask-repeat: no-repeat;
}

.index-header {
  position: fixed;
  z-index: 10;
  display: flex;
  align-items: center;
  width: 100%;
  transition: background-color 0.1s ease;

  .app-title {
    margin-right: 10rpx;
    .app-name {
      font-size: 38rpx;
      font-weight: bold;
      color: $text-color-inverse;
      text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
      font-family: 'Pixelify Sans', sans-serif;
    }
  }

  .search-box {
    display: flex;
    background-color: rgba($bg-color, 0.9);
    height: 70rpx;
    border-radius: 35rpx;
    align-items: center;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    width: 420rpx;
    border: 1rpx solid rgba($primary-color, 0.4);
    box-shadow: inset 0 0 8rpx rgba($warning-color, 0.6);

    .campus-select {
      display: flex;
      align-items: center;
      padding: 0 16rpx;
      height: 100%;
      border-right: 1px solid rgba($border-color, 0.5);

      .campus-text {
        max-width: 100rpx;
        font-size: 24rpx;
        margin-right: 6rpx;
        color: $text-color;
      }
    }

    .search-input {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      padding: 0 20rpx;

      .placeholder {
        font-size: 24rpx;
        color: $text-color-grey;
        margin-left: 10rpx;
      }
    }
  }
}

.banner-wrapper {
  position: relative;
  z-index: 1;
  padding: 220rpx 30rpx 0;
}

.banner-item {
  width: 100%;
  height: 100%;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba($primary-color, 0.3);
  border: 1rpx solid rgba($text-color-inverse, 0.8);
}

.main-menu {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  padding: 20rpx 30rpx 10rpx;

  .menu-card {
    width: 330rpx;
    height: 150rpx;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;

    &.idle-card {
      background: $highlight-color;
      border: 2rpx solid rgba($warning-color, 0.8);
    }

    &.forum-card {
      background: rgba($primary-color, 0.2);
      border: 2rpx solid rgba($primary-color, 0.6);
    }

    .menu-card-content {
      display: flex;
      justify-content: space-between;
      padding: 20rpx 24rpx;
      height: 100%;

      .menu-left {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .menu-title {
          font-size: 32rpx;
          font-weight: bold;
          margin-bottom: 10rpx;
          font-family: 'Pixelify Sans', sans-serif;
        }

        .menu-info {
          font-size: 22rpx;
          display: flex;
          align-items: center;

          &::before {
            content: '';
            display: inline-block;
            width: 10rpx;
            height: 10rpx;
            border-radius: 50%;
            background-color: $primary-color;
            margin-right: 6rpx;
          }
        }
      }

      .menu-icon {
        width: 76rpx;
        height: 76rpx;
        border-radius: 12rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        align-self: center;

        &.idle-icon {
          background-color: rgba($primary-color, 0.9);
        }

        &.reward-icon {
          background-color: $warning-color;
        }
      }
    }

    .go-button {
      position: absolute;
      right: 15rpx;
      bottom: 2rpx;
      font-size: 22rpx;
      color: $text-color;
      font-weight: bold;
      font-family: 'Pixelify Sans', sans-serif;
    }
  }
}

.sub-menu {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  padding: 20rpx 50rpx 10rpx;

  .sub-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .sub-icon {
      width: 80rpx;
      height: 80rpx;
      border-radius: 16rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 12rpx;

      &.job-icon {
        background-color: $primary-color;
      }

      &.house-icon {
        background-color: $primary-color;
      }

      &.activity-icon {
        background-color: $primary-color;
      }
    }

    .sub-text {
      font-size: 24rpx;
      color: $text-color;
    }
  }
}

.section-title {
  position: relative;
  z-index: 1;

  .title-tags {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding: 25rpx 30rpx 20rpx;
    background-color: rgba($bg-color, 0.6);
    backdrop-filter: blur(8rpx);
    -webkit-backdrop-filter: blur(8rpx);
    &::-webkit-scrollbar {
      display: none;
    }

    .tag-item {
      display: inline-block;
      padding: 10rpx 30rpx;
      background-color: rgba($bg-color, 0.8);
      border-radius: 30rpx;
      margin-right: 20rpx;
      font-size: 26rpx;
      transition: all 0.3s;
      color: $text-color;
      border: 1rpx solid rgba($primary-color, 0.3);

      &.active {
        background: linear-gradient(135deg, rgba($primary-color, 0.9), rgba($warning-color, 0.9));
        color: $text-color-title;
        box-shadow: 0 4rpx 8rpx rgba($primary-color, 0.3);
      }
    }
  }
}

.postList {
  width: 95%;
  margin: auto;
}
</style>
